import React, { useEffect, useRef } from 'react';
import { Button, Row, Col, Card } from 'antd';
import { LaptopOutlined, LineChartOutlined, ApiOutlined, UserAddOutlined, SolutionOutlined, VideoCameraOutlined, PieChartOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import AuthModal from './AuthModal';

const mainColor = '#5B6DFF';

const featureList = [
  {
    icon: <LaptopOutlined style={{ fontSize: 28, color: mainColor }} />,
    title: '场景覆盖',
    desc: '支持人工智能、大数据、物联网等多个技术领域的面试场景，满足不同岗位需求',
  },
  {
    icon: <LineChartOutlined style={{ fontSize: 28, color: mainColor }} />,
    title: '多模态分析',
    desc: '整合语音、视频、文本等多维度数据，构建完整的能力评测体系',
  },
  {
    icon: <ApiOutlined style={{ fontSize: 28, color: mainColor }} />,
    title: '智能反馈',
    desc: '生成专业的评测报告，提供针对性的改进建议和学习路径推荐',
  },
];

const processList = [
  {
    icon: <UserAddOutlined style={{ fontSize: 32, color: mainColor }} />,
    title: '注册账号',
    desc: '完善个人信息',
  },
  {
    icon: <SolutionOutlined style={{ fontSize: 32, color: mainColor }} />,
    title: '选择岗位',
    desc: '匹配职位要求',
  },
  {
    icon: <VideoCameraOutlined style={{ fontSize: 32, color: mainColor }} />,
    title: '模拟面试',
    desc: '开始在线面试',
  },
  {
    icon: <PieChartOutlined style={{ fontSize: 32, color: mainColor }} />,
    title: '获取报告',
    desc: '查看详细分析',
  },
];

export default function Home({ onLogin }) {
  const chartRef = useRef(null);
  const [authOpen, setAuthOpen] = React.useState(false);

  useEffect(() => {
    if (chartRef.current) {
      const chart = echarts.init(chartRef.current);
      chart.setOption({
        animation: false,
        radar: {
          indicator: [
            { name: '专业知识', max: 100 },
            { name: '技能匹配', max: 100 },
            { name: '表达能力', max: 100 },
            { name: '逻辑思维', max: 100 },
            { name: '创新能力', max: 100 },
            { name: '抗压能力', max: 100 }
          ]
        },
        series: [{
          type: 'radar',
          data: [{
            value: [85, 90, 75, 95, 80, 88],
            name: '能力评估',
            areaStyle: { color: 'rgba(99, 102, 241, 0.2)' },
            lineStyle: { color: mainColor }
          }]
        }]
      });
    }
  }, []);

  return (
    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* 固定顶部Header */}
      <div style={{
        background: '#fff',
        boxShadow: '0 2px 8px #f0f1f2',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '0 120px',
        height: 64,
        flex: '0 0 auto'
      }}>
        <div style={{ fontWeight: 'bold', fontSize: 20, color: mainColor, letterSpacing: 1, display: 'flex', alignItems: 'center' }}>
          <ApiOutlined style={{ fontSize: 28, marginRight: 10 }} />
          多模态面试评测智能体设计大赛
        </div>
        <div style={{ marginRight: 120 }}>
          <Button type="primary" style={{ marginRight: 8, background: mainColor, borderColor: mainColor }} onClick={() => setAuthOpen(true)}>登录</Button>
          <Button style={{ color: mainColor, borderColor: mainColor }} onClick={() => setAuthOpen(true)}>注册</Button>
        </div>
      </div>
      {/* 内容区 */}
      <div style={{ flex: '1 1 auto', overflow: 'auto' }}>
        {/* Hero Section 顶部大图+介绍+按钮 */}
        <div style={{ 
          position: 'relative', 
          height: 640, 
          background: `url('https://ai-public.mastergo.com/ai/img_res/3d345ebe3fea40083e78a89341eabd53.jpg') center/cover`,
          backgroundSize: '100% 100%'
        }}>
          <div style={{ 
            position: 'absolute', 
            inset: 0, 
            background: 'linear-gradient(90deg, rgba(65,105,225,0.85) 0%, rgba(65,105,225,0.6) 50%, rgba(65,105,225,0.4) 100%)', 
            display: 'flex', 
            alignItems: 'center' 
          }}>
            <div style={{ maxWidth: 1000, marginLeft: 120, width: '100%' }}>
              <h1 style={{ color: '#fff', fontSize: 54, fontWeight: 900, marginBottom: 30 }}>智能面试助手</h1>
              <p style={{ color: '#fff', fontSize: 22, marginBottom: 42, lineHeight: 1.6, maxWidth: 650 }}>利用人工智能技术，为高校学生提供专业的模拟面试训练与评测，助力职业发展</p>
              <Button size="large" style={{ 
                background: '#fff', 
                color: mainColor, 
                fontWeight: 600, 
                fontSize: 19, 
                height: 54, 
                padding: '0 45px',
                borderRadius: 8
              }}>开始体验</Button>
            </div>
          </div>
        </div>
        {/* 核心功能卡片区 */}
        <div style={{ padding: '96px 0', background: '#fff' }}>
          <h2 style={{ fontSize: 32, fontWeight: 900, textAlign: 'center', marginBottom: 64 }}>核心功能</h2>
          <Row gutter={32} justify="center">
            {featureList.map((item, idx) => (
              <Col xs={24} md={8} key={item.title}>
                <Card bordered={false} style={{ minHeight: 200, borderRadius: 16, boxShadow: '0 4px 24px 0 rgba(91,109,255,0.08)', textAlign: 'center', background: '#f6f7fb' }}>
                  <div style={{ width: 56, height: 56, background: '#e0e7ff', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px' }}>{item.icon}</div>
                  <h3 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>{item.title}</h3>
                  <div style={{ color: '#666', fontSize: 16 }}>{item.desc}</div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
        {/* 能力评估 */}
        <div style={{ padding: '96px 0', background: '#f6f7fb' }}>
          <h2 style={{ fontSize: 32, fontWeight: 900, textAlign: 'center', marginBottom: 64 }}>能力评估</h2>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <Row gutter={64} align="middle" justify="center">
              <Col xs={24} md={12}>
                <div ref={chartRef} style={{ width: '100%', height: 400 }}></div>
              </Col>
              <Col xs={24} md={12}>
                <div style={{ paddingLeft: 32 }}>
                  <div style={{ marginBottom: 32 }}>
                    <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>专业知识评估</h3>
                    <div style={{ color: '#666' }}>技术基础扎实，对人工智能核心概念理解深入</div>
                  </div>
                  <div style={{ marginBottom: 32 }}>
                    <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>表达能力分析</h3>
                    <div style={{ color: '#666' }}>语言流畅，逻辑清晰，但需要加强专业术语的运用</div>
                  </div>
                  <div>
                    <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>改进建议</h3>
                    <div style={{ color: '#666' }}>建议加强项目经验分享的结构化表达，突出个人贡献</div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </div>
        {/* 使用流程 */}
        <div style={{ padding: '96px 0', background: '#fff' }}>
          <h2 style={{ fontSize: 32, fontWeight: 900, textAlign: 'center', marginBottom: 64 }}>使用流程</h2>
          <Row gutter={32} justify="center" align="top">
            {processList.map((item, idx) => (
              <Col xs={24} md={6} key={item.title}>
                <div style={{ textAlign: 'center', padding: '0 16px' }}>
                  <div style={{ width: 64, height: 64, background: '#e0e7ff', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px' }}>{item.icon}</div>
                  <h3 style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>{item.title}</h3>
                  <div style={{ color: '#666' }}>{item.desc}</div>
                </div>
              </Col>
            ))}
          </Row>
        </div>
        {/* 页脚 */}
        <div style={{ background: '#181c2a', color: '#fff', padding: '48px 0 24px 0' }}>
          <Row gutter={32} style={{ maxWidth: 1200, margin: '0 auto' }}>
            <Col xs={24} md={6}>
              <div style={{ fontWeight: 'bold', marginBottom: 8, color: mainColor }}>关于我们</div>
              <div style={{ color: '#aaa' }}>致力于为高校学生提供专业的面试训练解决方案</div>
            </Col>
            <Col xs={24} md={6}>
              <div style={{ fontWeight: 'bold', marginBottom: 8, color: mainColor }}>联系方式</div>
              <div style={{ color: '#aaa' }}>邮箱：contact@interview.ai<br />电话：400-888-8888</div>
            </Col>
            <Col xs={24} md={6}>
              <div style={{ fontWeight: 'bold', marginBottom: 8, color: mainColor }}>快速链接</div>
              <div style={{ color: '#aaa' }}>使用指南<br />常见问题<br />隐私政策</div>
            </Col>
            <Col xs={24} md={6}>
              <div style={{ fontWeight: 'bold', marginBottom: 8, color: mainColor }}>关注我们</div>
              <div style={{ color: '#aaa' }}>微信 微博 知乎</div>
            </Col>
          </Row>
          <div style={{ textAlign: 'center', marginTop: 24, color: '#aaa' }}>
            © 2024 多模态面试评测智能体. 保留所有权利
          </div>
        </div>
      </div>
      <AuthModal open={authOpen} onClose={() => setAuthOpen(false)} />
    </div>
  );
} 